<template>
  <div class="data">
    <div class="counts" align="center">
      <div class="btn-group btn-group-justified">
        <div class="btn-group">
          <button class="btn btn-primary">
            所有表数
            <br />
            {{counts}}
          </button>
        </div>
        <div class="btn-group">
          <button class="btn btn-success">
            成功表数
            <br />
            {{successCounts}}
          </button>
        </div>
        <div class="btn-group">
          <button class="btn btn-danger">
            失败表数
            <br />
            {{failedCounts}}
          </button>
        </div>
        <div class="btn-group">
          <button class="btn btn-info" @click="getCommunityMeterStatus()">
            刷新
            <br />数据
          </button>
        </div>
      </div>
    </div>
    <hr>
    <el-table
      v-loading="communityMeterLoading"
      :data="handleCommunityMeterList"
      header-cell-class-name="tableRow"
      cell-class-name="tableRow"
      highlight-current-row
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="regionName" label="所属区域"></el-table-column>
      <el-table-column prop="communityName" label="小区名称"></el-table-column>
      <el-table-column prop="deviceCount" label="表总数" min-width="68">
        <template slot-scope="scope">
          <el-tag type=primary>{{scope.row.deviceCount}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sucessCount" label="成功表数" min-width="68">
        <template slot-scope="scope">
          <el-tag type="success" effect="dark">{{scope.row.sucessCount}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="failedCount" label="失败表数" min-width="68">
        <template slot-scope="scope">
          <el-tag type="danger" effect="dark">{{scope.row.failedCount}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="查看详情" min-width="160">
        <template slot-scope="scope">
          <el-button @click="getMeter(scope.$index, scope.row, 0)" type="text" size="small">查看所有表</el-button>
          <el-button @click="getMeter(scope.$index, scope.row, 1)" type="text" size="small">查看失败表</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="dayAmounts" label="总日用量" min-width="68">
        <template slot-scope="scope">
          <el-button @click="getCommDayUseList(scope.row)" type="text" size="small">{{scope.row.dayAmounts}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="monthAmounts" label="总月用量" min-width="68">
        <template slot-scope="scope">
          <el-button @click="getCommMonthUseList(scope.row)" type="text" size="small">{{scope.row.monthAmounts}}</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="查看详情" min-width="68" fixed="right">
        <template slot-scope="scope">
          <el-button @click="viewDetaels(scope.row.name, scope.row.id)" type="text" size="small">
            更多
            <i class="el-icon-more el-icon--right"></i>
          </el-button>
        </template>
      </el-table-column>-->
      </el-table>

      <!-- 小区日用量历史数据 -->
      <el-dialog
        :visible.sync="isCommDayUse"
        :title="title"
        :close-on-click-modal="false"
        append-to-body
        width="400px"
      >
        <el-table
          v-loading="commDayUseLoading"
          :data="handleCommDayUseList"
          header-cell-class-name="tableRow"
          cell-class-name="tableRow"
          highlight-current-row
          :stripe="true"
          height="450px"
        >
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="dayAmounts01" label="用量"></el-table-column>
        </el-table>
      </el-dialog>

      <!-- 小区月用量历史数据 -->
      <el-dialog
        :visible.sync="isCommMonthUse"
        :title="title"
        :close-on-click-modal="false"
        append-to-body
        width="400px"
      >
        <el-table
          v-loading="commMonthUseLoading"
          :data="handleCommMonthUseList"
          header-cell-class-name="tableRow"
          cell-class-name="tableRow"
          highlight-current-row
          :stripe="true"
          height="450px"
        >
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="month" label="年月"></el-table-column>
          <el-table-column prop="monthAmounts01" label="用量"></el-table-column>
        </el-table>
      </el-dialog>
  </div>
</template>

<script>
import bus from './bus';
import moment from 'moment';
import { readingStatusByComm, getCommDayUse, getCommMonthUse } from "../../../../api/api";
export default {
  data() {
    return {
      counts: 0,
      successCounts: 0,
      failedCounts: 0,
      communityMeterList: [],
      commMeterList: [], // 小区所有表
      failedCommMeterList: [], // 小区失败表
      communityMeterLoading: false, //抄表页面加载动画
      commMeterDialog: false, //“查看所有表”一级弹窗
      failedCommMeterDialog: false, // “查看失败表”一级弹窗
      communityId: [],
      title: "",
      isCommDayUse: false,
      commDayUseList: [],
      commDayUseLoading: false,
      isCommMonthUse: false,
      commMonthUseList: [],
      commMonthUseLoading: false,
    };
  },
  computed: {
    // 对显示信息的格式进行修改
    handleCommunityMeterList() {
      let that = this;
      if (this.communityMeterList.length == 0) return;
      this.communityMeterList.forEach(function(item) {
        item.failedCount = item.deviceCount - item.sucessCount;
      });
      return this.communityMeterList;
    },
    handleCommDayUseList() {
      let that = this;
      if (this.commDayUseList.length == 0) return;
      this.commDayUseList.forEach(function(item) {
        item.date = moment(item.date).format("YYYY-MM-DD");
      });
      return this.commDayUseList;
    },
    handleCommMonthUseList() {
      let that = this;
      if (this.commMonthUseList.length == 0) return;
      this.commMonthUseList.forEach(function(item) {
        item.month = moment(item.month).format("YYYY[年]MM[月]");
      });
      return this.commMonthUseList;
    }
  },
  methods: {
    // 按小区读取抄表数据
    getCommunityMeterStatus() {
      let that = this;
      let msg = {
        enprNo: 'esss',
        operatorId: 85
      };
      that.counts = 0;
      that.successCounts = 0;
      that.failedCounts = 0;
      that.communityMeterLoading = true;
      readingStatusByComm(msg)
        .then(function(res) {
          if (res.data.code === "200") {
            that.communityMeterList = res.data.info;
            res.data.info.forEach(item => {
              that.counts += item.deviceCount;
              that.successCounts += item.sucessCount;
              that.failedCounts = that.counts - that.successCounts;
            })
            that.communityMeterLoading = false;
          } else {
            that.communityMeterLoading = false;
            // that.Error("获取数据失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },

    /**
     * 查看小区所有表、查看小区失败表
     */
    getMeter(index, row, type) {
      let msg = {};
      msg.communityId = row.communityId;
      msg.enprNo = row.enprNo;
      msg.title = type === 0 ? row.communityName + "所有表" : row.communityName + "失败表";
      msg.dialog = true;
      msg.type = type; // type 为 0 表示查看所有表
      this.$store.dispatch("meterReadingManagement/commitCommMeterList", msg);
    },

    // 查看小区日用量历史数据
    getCommDayUseList(row) {
      let that = this;
      that.title = row.communityName + "日用量历史数据";;
      that.isCommDayUse = true;
      that.commDayUseLoading = true;
      let Msg = {
        communityId: row.communityId,
        page: 1,
        rows: 500
      };
      getCommDayUse(Msg).then(function(res) {
        if (res.data.code === "200") {
          that.commDayUseList = res.data.data.content;
          that.total = res.data.totalElements;
          that.commDayUseLoading = false;
        } else {
          that.commDayUseLoading = false;
          // that.Error("获取数据失败！");
        }
      })
      .catch(function(err) {
        // that.Error(err);
        that.commDayUseLoading = false;
      });
    },

    // 查看小区月用量历史数据
    getCommMonthUseList(row) {
      let that = this;
      that.title = row.communityName + "月用量历史数据";;
      that.isCommMonthUse = true;
      that.commMonthUseLoading = true;
      let Msg = {
        communityId: row.communityId,
        page: 1,
        rows: 500
      };
      getCommMonthUse(Msg).then(function(res) {
        if (res.data.code === "200") {
          that.commMonthUseList = res.data.data.content;
          that.total = res.data.totalElements;
          that.commMonthUseLoading = false;
        } else {
          that.commMonthUseLoading = false;
          // that.Error("获取数据失败！");
        }
      })
      .catch(function(err) {
        // that.Error(err);
        that.commMonthUseLoading = false;
      });
    },

    Error(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "error"
      });
    }
  },

  mounted() {
    this.getCommunityMeterStatus();
  }
};
</script>

<style>
.tableRow {
  text-align: center !important;
}
.el-tabs__content {
  overflow: auto;
  position: relative;
}
</style>